<template>
	<view class="warrantyPage">

		<view id="main">
			<navigator class="a" url="/pages/index/index">
				<image src="../../static/images/logo4.png" mode="widthFix"></image>
			</navigator>

			<view class="w-form">
				<view class="form-top">
					<view class="left">
						<view class="name">客户 CUSTOMER:</view>
						<view class="phone">客服电话 Tel.: 0591-83275111</view>
						<view class="xsnum">销售编号 No：{{order.salesSn}}</view>
					</view>
					<view class="right">
						<view class="h2"><b>质保单</b> GUARANTEE CERTIFICATE</view>
						<view class="date">日期 Date: {{order.createdDate}}</view>
					</view>
				</view>
				<view class="form-min">
					<view class="th">
						<view class="item">
							<view class="tit">货品编号</view>
						</view>
						<view class="item">
							<view class="tit">品名</view>
						</view>
						<view class="item">
							<view class="tit">标重</view>
						</view>
						<view class="item">
							<view class="tit">价格信息</view>
						</view>
						<view class="item">
							<view class="tit">证书</view>
						</view>
						<view class="item">
							<view class="tit">备注信息</view>
						</view>
						<view class="item">
							<view class="tit">实收金额</view>
						</view>
					</view>
					<view class="td" v-for="(item,index) in order.orderItems">
						<view class="item">
							{{item.snsec==null?'':item.snsec}}
						</view>
						<view class="item">
							{{item.name}}
						</view>
						<view class="item">
							{{item.weight}}克
						</view>
						<view class="item">
							{{item.priceInformation==null?'':item.priceInformation}}
						</view>
						<view class="item">
							{{item.certificate==null?'':item.certificate}}
						</view>
						<view class="item">
							{{item.qualityAssuranceNote==null?'':item.qualityAssuranceNote}}
						</view>
						<view class="item">
							{{item.totalPrice}}
						</view>
					</view>

					<view class="sign">
						<view class="left">合计（大写）：{{order.priceToCn}}</view>
						<view class="right">
							<view class="netrec">实收合计：<view class="num">{{order.price}}</view>
							</view>
							<view class="approved">批核人APPROVED PERSOM: 店长</view>
						</view>
					</view>
				</view>

				<view class="regular">
					<view class="text-box">
						<view class="c-text text">
							<view class="h1">售后服务须知:</view>
							<view class="p">
								1、万蔓乐意为顾客提供免费清洗，保养及维修服务。<br />
								2、产品售出后非因质量问题或非因适用法律另有规定，万蔓不提供退换货服务，但有特殊售后服务约定的销售除外。<br />
								3、请顾客妥善保存本保证单，凭本单可前往全球任何万蔓分店，我们会根据法律及相关政策规定为您提供相关的售后服务。<br />
								4、个别售后服务或需顾客承担一定费用，顾客可拨打万蔓服务热线或向各分店店员咨询。<br />
							</view>
						</view>
						<view class="e-text text">
							<view class="h1">AFTER-SALES SERVICE TERMS&CONDITIONS:</view>
							<view class="p">
								1. UMIND WILL PROVIDE CLEANING AND EXAMINATION SERVICES FOR PRODUCTS SOLD TO OUR
								CUSTOMERS.<br />
								2. EXCEPT FOR PRODUCTS SOLD UNDER SPECIFIC AFTER -SALES SERVICE TERMS AND CONDITI-
								ONS.PRODUCTS SOLD ARE NON-EXCHANGEABLE AND NON-REFUNDABLE UNLESS THERE
								ARE QUALITY ISSUES OR AS OTHERWISE REQUIRED BYAPPLICABLE LAWS.<br />
								3. PLEASE KEEP THIS GUARANTEE FORM PROPERLY.PLEASE PRESENT THIS CERTIFICATE TO AN-
								Y UMIND STORE WORLDWIDE FOR AFTER-SALES SERVICE WHICH WE WILL ARRANGE IN ACCO-
								RDANCE WITH APPLICABLE LAWS AND REGULATIONS.<br />
								4. CHARGES MAY APPLY FOR CERTAIN AFTER-SALES SERVICES， DETAILS OF WHICH CAN BE OB-
								TAINED BY CALLING THE RELEVANT ENQUIRY HOTLINE BELOWOR CONSUL ING ANY STAFF AT
								OUR STORES.
							</view>
						</view>
					</view>

					<view class="dashed">
						<view class="text-box">
							<view class="c-text text">
								<view class="h1">声明:</view>
								<view class="p">
									本保证单所列钻石采购自未参与资助冲突、遵守联合国决议的合法来源。卖方特此仅以个人认知及/或该钻石之供应商的书面保证，保证此钻石为非冲突钻石。
								</view>
							</view>
							<view class="e-text text">
								<view class="h1">DECLARATION:</view>
								<view class="p">
									THE DIAMONDS HEREIN INVOICED HAVE BEEN PURCHASED FROM LEGITIMATE SOURCES NOT
									INVOLVED IN FUNDING CONFLICT AND IN COMPLIANCE WITH UNITED NATIONS RESOLUTIONS.
									THE SELLER HEREBY GUARANTEES THAT THESE DIAMONDS ARE CONFLICT-FREE.BASED ON
									THE SELLER＇S KNOWLEDGE AND/OR WRITTEN GUARANTEES PROVIDED BY THE SUPPLIER OF
									THESE DIAMONDS.
								</view>
							</view>
						</view>

						<view class="text-box">
							<view class="c-text text">
								<view class="h1">温馨提示:</view>
								<view class="p">
									尊敬的顾客，如遇短信、电话或站外链接等邀请您进行订单相关操作，请拨打万蔓服务热线0591-83275111确认，谨防上当受骗。
								</view>
							</view>
							<view class="e-text text">
								<view class="h1">KIND rpxINDER:</view>
								<view class="p">
									DEAR CUSTOMER. IF YOU RECEIVE INFO ABOUT ORDER OPERATION BY TEXT MESSAGE,PHONE
									CALL OR OUTSIDE LINKS PLEASE FIRST CONFIRM IT BY CALLING UMIND OFFICIAL HOTLINE AND
									BEWARE OF FRAUD.
								</view>
							</view>
						</view>

					</view>
				</view>


			</view>

		</view>


	</view>
</template>

<script>
	import html2canvas from 'html2canvas'
	import {
		orderDetail
	} from '@/api/order.js'
	export default {
		data() {
			return {
				order: [],
				orderSn: '',
			}
		},
		onLoad(options) {
			this.orderSn = options.id
			this.init(options.id)
		},
		methods: {
			init() {
				orderDetail({
					orderSn: this.orderSn
				}).then(res => {
					this.order = res.data.order
				})
			},
			createPoster() {
				uni.showLoading({
					title: '正在生成图片'
				})
				const query = uni.createSelectorQuery().in(this)
				var dom = query.select('#main')
				console.log('noShow', dom)
				html2canvas(dom, {
					useCORS: true,
					scale: 2,
					height: dom.clientHeight,
					windowHeight: dom.clientWidth,
					dpi: 350
				}).then((canvas) => {
					uni.hideLoading()
					this.imageData = canvas.toDataURL('image/png', 1)
				})
			},

		}
	}
</script>

<style>
	.warrantyPage {
		padding-bottom: 1.2rpx;
	}

	.warrantyPage .a {
		width: 180rpx;
		display: block;
		text-align: center;
		margin: 50rpx auto;
	}

	.w-form {
		padding: 0 40rpx;
	}

	.w-form .form-top {
		/* display: flex;
		align-items: flex-end;
		justify-content: space-between; */
		margin-bottom: 30rpx;
	}

	.w-form .form-top .left>view {
		color: #1c1c1c;
		margin-bottom: 20rpx;
	}

	.w-form .form-top .right .h2 {
		margin-bottom: 20rpx;
	}

	.w-form .form-top .right .h2 b {
		margin-right: 20rpx;
		display: inline-block;
	}

	.w-form .form-top .right .date {}

	.w-form .form-min {
		padding: 30rpx 0;
		border-top: 2px solid #121212;
		border-bottom: 2px solid #121212;
		margin-bottom: 70rpx;
	}

	.w-form .form-min .th {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.w-form .form-min .th .item {
		width: 16%;
		text-align: left;
	}

	.w-form .form-min .th .item .tit {
		font-size: 28rpx;
	}

	.w-form .form-min .td {
		display: flex;
		justify-content: space-between;
		font-size: 15rpx;
		color: #121212;
		opacity: .8rpx;
	}

	.w-form .form-min .td .item {
		width: 16%;
		line-height: 1.5;
		font-size: 28rpx;
	}

	.w-form .form-min .sign {
		margin-top: 270rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		font-size: 19rpx;
		font-weight: bold;
		color: #121212;
	}

	.w-form .form-min .sign .right .netrec {
		font-size: 24rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 30rpx;
	}

	.w-form .form-min .sign .right .netrec .num {
		border-bottom: solid 1px #121212;
		min-width: 1.2rpx;
	}

	.w-form .regular {
		padding: 0 30rpx;
	}

	.w-form .regular .text-box {

		margin-bottom: 30rpx;
	}

	.w-form .regular .text-box .h1 {
		margin-bottom: 15rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.w-form .regular .text-box .p {
		font-size: 26rpx;
		line-height: 2;
	}

	.w-form .regular .e-text .p {
		font-size: 26rpx;
		line-height: 2;
	}

	.w-form .regular .dashed {
		border: 1px dashed #121212;
		padding: 40rpx 30rpx;
	}

	.downpdf {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin: auto;
		margin-top: 30rpx;
	}
</style>